<style>
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Row>
        <Col span="24">
          <Button
            @click="toExcel"
            type="default"
            class="float-r"
            size="large"
            icon="md-cloud-download"
            v-perms="'bss:dev:export'"
          >导出</Button>
          <Button
          @click="importDevice"
          type="error"
          class="float-r"
          size="large"
          icon="md-cloud-upload"
            v-perms="'bss:dev:import'"
          style="margin-right:10px;"
        >导入烟感设备
          </Button>
          <Button
            type="warning"
            class="float-r"
            size="large"
            icon="md-git-compare"
            @click="unbindShop"
            style="margin-right:10px;"
            v-perms="'bss:dev:unbind'"
          >解绑</Button>
          <Button
            type="success"
            class="float-r"
            size="large"
            icon="md-key"
            @click="bindShop"
            style="margin-right:10px;"
            v-perms="'bss:dev:bind'"
          >绑定</Button>

          <!--<Button class="top-right-btn" size="large" icon="plus" @click="addItem" v-has="'add'">添加</Button>-->
          <Poptip
            width="400"
            title="搜索"
            placement="bottom-end"
            class="float-r"
            style="margin-right:10px;"
          >
            <Button type="primary" size="large" icon="ios-search">搜 索</Button>
            <div style="text-align:center;max-height:400px;overflow-y:scroll;" slot="content">
              <Form
                ref="searchForm"
                :model="searchForm"
                :label-width="80"
                value="true"
                style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;"
              >
                <Row>
                  <Form-item label="设备名称">
                    <Input v-model="searchForm.devName"></Input>
                  </Form-item>
                </Row>
                 <Row>
                  <Form-item label="设备厂商">
                    <Input v-model="searchForm.devManufactory"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="IMEI">
                    <Input v-model="searchForm.imei"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="ICCID">
                    <Input v-model="searchForm.iccid"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="设备状态">
                    <Select v-model="searchForm.status">
                      <Option :value="0">全部</Option>
                      <Option :value="1">在线</Option>
                      <Option :value="2">离线</Option>
                    </Select>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="运营商">
                    <Input v-model="searchForm.operator"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="所属部门">
                    <Cascader
                      :data="deptCascader"
                      v-model="searchForm.deptCascader"
                      :filterable="true"
                      transfer
                      change-on-select
                    ></Cascader>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="所属商铺">
                    <Input v-model="searchForm.shopName"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="负责人">
                    <Input v-model="searchForm.managerName"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="负责人电话">
                    <Input v-model="searchForm.managerMobile"></Input>
                  </Form-item>
                </Row>
                <Row>
                  <Form-item label="安装地址">
                    <Input v-model="searchForm.installAddr"></Input>
                  </Form-item>
                </Row>
              </Form>
              <Row>
                <Button
                  style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff"
                  size="small"
                  @click="doSearchTableList"
                >确定</Button>
                <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
              </Row>
            </div>
          </Poptip>
        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <Table
        stripe
        size="small"
        :height="tableHeight"
        :loading="tableLoading"
        :columns="tableColums"
        :data="tableData"
        @on-selection-change="onSelectionChange"
      ></Table>
    </Row>
    <Row>
      <Page
        :total="total"
        :page-size="currentPageSize"
        :current="currentPage"
        @on-change="changeCurrentPage"
        @on-page-size-change="changePageSize"
        show-total
        show-sizer
        style="float:right;margin-top:10px"
      ></Page>
    </Row>
    <!--新增编辑-->
    <deviceForm
      :modalShow="formShow"
      :modalFormTitle="formTitle"
      :parentForm="parentForm"
      @listenModalForm="hideModel"
      @refreshTableList="getTableList"
    ></deviceForm>
    <!--导入-->
    <deviceImport
      :modalShow="importFormShow"
      @listenModalForm="hideImportModel"
      @refreshTableList="getTableList"
    ></deviceImport>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
    <Modal title="安装照片" v-model="visible">
      <img :src="devImage" v-if="visible" style="width: 100%">
      <div slot="footer"></div>
    </Modal>
    <!--绑定商铺-->
    <bindShop
      :modalShow="bindModalShow"
      :parentDeviceList="selectedDevices"
      @listenModal="hideBindModel"
      @refreshTableList="getTableList"
    ></bindShop>
    <!--解绑商铺-->
    <unBindShop
      :modalShow="unbindModalShow"
      :parentDeviceList="selectedDevices"
      @listenModal="hideUnBindModel"
      @refreshTableList="getTableList"
    ></unBindShop>
  </div>
</template>

<script>
import { getDevicePagedList, delDevice, getDeviceListExcel } from "@/api/asset";
import { getDeptCascader } from "@/api/system";
import deviceForm from "./deviceForm.vue";
import deviceImport from "./deviceImport.vue";
import bindShop from "./bindShop.vue";
import unBindShop from "./unBindShop.vue";
import expandRow from "./table-expand.vue";
import config from "@/config";

const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  components: {
    deviceForm,
    deviceImport,
    bindShop,
    unBindShop
  },
  data() {
    return {
      tableLoading: false,
      tableColums: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type: "index",
          minWidth: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          minWidth: 140,
          title: "设备名称",
          key: "devName"
        },
        {
          align: "center",
          minWidth: 120,
          title: "设备型号",
          key: "devModel"
        },
        {
          align: "center",
          minWidth: 120,
          title: "设备厂商",
          key: "devManufactory"
        },
        {
          align: "center",
          minWidth: 140,
          title: "IMEI",
          key: "imei"
        },
        {
          align: "center",
          minWidth: 150,
          title: "设备状态",
          key: "devStatus",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color:
                    row.devStatus == 1
                      ? "success"
                      : row.devStatus == 2
                      ? "error"
                      : "default"
                }
              },
              row.devStatus == 1 ? "在线" : row.devStatus == 2 ? "离线" : "无"
            );
          }
        },
        {
          align: "center",
          minWidth: 100,
          title: "状态时间",
          key: "updateDate"
        },
        {
          align: "center",
          minWidth: 100,
          title: "信噪比(dB)",
          key: "signalSnr"
        },
        {
          align: "center",
          minWidth: 140,
          title: "信号覆盖等级(dB)",
          key: "signalEcl"
        },
        {
          align: "center",
          minWidth: 120,
          title: "信号强度(dBm)",
          key: "signalStrength"
        },
        {
          align: "center",
          minWidth: 100,
          title: "电池电量",
          key: "batteryPower",
          render: (h, params) => {
            const row = params.row;
            return h("span", row.batteryPower ? row.batteryPower + "%" : "");
          }
        },
        {
          align: "center",
          minWidth: 100,
          title: "RSSI场强值",
          key: "rssi"
        },
        {
          align: "center",
          minWidth: 100,
          title: "污染程度",
          key: "dirtyPercent",
          render: (h, params) => {
            let dirtyPercent = params.row.dirtyPercent;
            let dirtyPercentName = "";
            if (dirtyPercent == null) {
              dirtyPercentName = "";
            } else if (dirtyPercent < 11) {
              dirtyPercentName = dirtyPercent + "% 无污染";
            } else if (dirtyPercent < 31) {
              dirtyPercentName = dirtyPercent + "% 轻度污染";
            } else if (dirtyPercent < 61) {
              dirtyPercentName = dirtyPercent + "% 中度污染";
            } else {
              dirtyPercentName = dirtyPercent + "% 重度污染";
            }
            return h("span", dirtyPercentName);
          }
        },
        {
          align: "center",
          minWidth: 100,
          title: "烟雾浓度",
          key: "smokeScope",
          render: (h, params) => {
            let smokeScope = params.row.smokeScope;
            let smokeScopeName = "";
            if (smokeScope == null) {
              smokeScopeName = "";
            } else if (smokeScope < 31) {
              smokeScopeName = smokeScope + "% 无烟";
            } else if (smokeScope < 71) {
              smokeScopeName = smokeScope + "% 低烟";
            } else if (smokeScope < 100) {
              smokeScopeName = smokeScope + "% 中烟";
            } else {
              smokeScopeName = smokeScope + "% 浓烟";
            }
            return h("span", smokeScopeName);
          }
        },
        {
          align: "center",
          minWidth: 100,
          title: "ICCID",
          key: "iccid"
        },
        {
          align: "center",
          minWidth: 100,
          title: "运营商",
          key: "operator"
        },
        {
          align: "center",
          minWidth: 100,
          title: "安装时间",
          key: "installDate"
        },
        {
          align: "center",
          minWidth: 140,
          title: "店铺地址",
          key: "shopAddr"
        },
        {
          align: "center",
          minWidth: 180,
          title: "安装位置",
          key: "installAddr"
        },
        {
          align: "center",
          minWidth: 100,
          title: "所属部门",
          key: "depName"
        },
        {
          align: "center",
          minWidth: 100,
          title: "上级部门",
          key: "parentDept"
        },
        {
          align: "center",
          minWidth: 100,
          title: "所属商铺",
          key: "shopName"
        },
        {
          align: "center",
          minWidth: 100,
          title: "所属客户",
          key: "managerName"
        },
        {
          align: "center",
          minWidth: 120,
          title: "客户手机",
          key: "managerMobile"
        },
        {
          align: "center",
          title: "安装图",
          minWidth: 80,
          key: "installPic",
          render: (h, params) => {
            let imgSrc = params.row.installPic;
            if (imgSrc) {
              imgSrc = baseUrl + imgSrc;
              return h("img", {
                attrs: {
                  src: imgSrc
                },
                on: {
                  click: () => {
                    this.handleView(imgSrc);
                  }
                },
                style: {
                  width: "20px",
                  height: "20px"
                }
              });
            }
          }
        },
        {
          title: "操作",
          minWidth: 140,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            let actions = [];

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "bss:dev:update"
                    }
                  ],
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editItem(params.row);
                    }
                  }
                },
                "修改"
              )
            );

            actions.push(
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  directives: [
                    {
                      name: "perms",
                      value: "bss:dev:delete"
                    }
                  ],
                  on: {
                    click: () => {
                      this.delItem(params.row.devId);
                    }
                  }
                },
                "删除"
              )
            );

            return h("div", actions);
          }
        }
      ],
      tableData: [],
      tableHeight: window.innerHeight - 300,
      total: 0,
      currentPage: 1,
      currentPageSize: 20,
      formShow: false,
      formTitle: "添加设备",
      parentForm: {
        deptId: "",
        devId: "",
        devName: "",
        devModel: "",
        dutyImage: "",
        friendName: "",
        imei: "",
        iccid: "",
        installDate: "",
        installAddr: "",
        remark: "",
        shopAddr: ""
      },
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        devName: "",
        devManufactory:"",
        imei: "",
        iccid: "",
        operator: "",
        managerName: "",
        managerMobile: "",
        shopName: "",
        installAddr: "",
        status: 0,
        deptId: 0,
        deptCascader: [],
        size: 10,
        current: 1
      },
      importFormShow: false,
      visible: false,
      devImage: "",
      deptCascader: [],
      bindModalShow: false,
      selectedDevices: [],
      unbindModalShow: false
    };
  },
  computed: {},
  created() {
    let status = this.$route.query.status;
    if (status) {
      this.searchForm.status = status;
    }
    this.getDeptCascader();
  },
  mounted() {
    this.getTableList();
    const vm = this;
    window.onresize = () => {
      return (() => {
        vm.tableHeight = window.innerHeight - 300;
      })();
    };
  },
  methods: {
    async getDeptCascader() {
      let res = await getDeptCascader();
      if (res.code == 0) {
        this.deptCascader = res.data;
      }
    },
    resetSearch() {
      this.searchForm.devName = "";
      this.searchForm.imei = "";
      this.searchForm.iccid = "";
      this.searchForm.status = 0;
      this.searchForm.operator = "";
      this.searchForm.shopName = "";
      this.searchForm.managerName = "";
      this.searchForm.managerMobile = "";
      this.searchForm.installAddr = "";
      this.searchForm.deptCascader = [];
       this.searchForm.devManufactory="";
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      this.searchForm.current = this.currentPage;
      this.searchForm.size = this.currentPageSize;
      if (this.searchForm.deptCascader.length < 1) {
        this.searchForm.deptId = 0;
      } else {
        var arr = this.searchForm.deptCascader;
        this.searchForm.deptId = arr[arr.length - 1];
      }
      let params = {
        devName: this.searchForm.devName,
        devManufactory:this.searchForm.devManufactory,
        imei: this.searchForm.imei,
        deptId: this.searchForm.deptId,
        iccid: this.searchForm.iccid,
        status: this.searchForm.status,
        operator: this.searchForm.operator,
        shopName: this.searchForm.shopName,
        managerName: this.searchForm.managerName,
        managerMobile: this.searchForm.managerMobile,
        installAddr: this.searchForm.installAddr,
        size: this.searchForm.size,
        current: this.searchForm.current
      };
      const result = await getDevicePagedList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.records;
      } else {
        this.$Message.error(result.msg);
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "修改设备";
      this.formShow = true;
    },
    delItem(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await delDevice(this.delId);
        if (res.code == "0") {
          this.$Message.success("删除成功!");
          this.getTableList();
          this.delModal = false;
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
    importDevice() {
      this.importFormShow = true;
    },
    hideImportModel() {
      this.importFormShow = false;
    },
    async toExcel() {
      this.tableLoading = true;
      if (this.searchForm.deptCascader.length < 1) {
        this.searchForm.deptId = 0;
      } else {
        var arr = this.searchForm.deptCascader;
        this.searchForm.deptId = arr[arr.length - 1];
      }
      let params = {
        devName: this.searchForm.devName,
        imei: this.searchForm.imei,
        deptId: this.searchForm.deptId,
        iccid: this.searchForm.iccid,
        status: this.searchForm.status,
        operator: this.searchForm.operator,
        shopName: this.searchForm.shopName,
        managerName: this.searchForm.managerName,
        managerMobile: this.searchForm.managerMobile,
        installAddr: this.searchForm.installAddr
      };
      const res = await getDeviceListExcel(params);
      this.tableLoading = false;
      if (res.code == 0) {
        const url = baseUrl + res.data;
        window.open(url);
      } else {
        this.$Message.error(res.msg);
      }
    },
    handleView(img) {
      this.devImage = img;
      this.visible = true;
    },
    hideBindModel() {
      this.bindModalShow = false;
    },
    bindShop() {
      if (this.selectedDevices.length == 0) {
        this.$Message.warning("请选择所需绑定设备！");
      } else {
        this.bindModalShow = true;
      }
    },
    unbindShop() {
      if (this.selectedDevices.length == 0) {
        this.$Message.warning("请选择所需绑定设备！");
      } else {
        let flag = true;
        for (let i = 0; i < this.selectedDevices.length; i++) {
          let item = this.selectedDevices[i];
          if (item.shopId < 1) {
            this.$Message.warning("请选择已绑定店铺的设备！");
            flag = false;
            break;
          }
        }
        if (flag) this.unbindModalShow = true;
      }
    },
    hideUnBindModel() {
      this.unbindModalShow = false;
    },
    onSelectionChange(selections) {
      this.selectedDevices = selections;
    }
  }
};
</script>
